<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<!DOCTYPE html>
<!-- 员工登录后的主页 -->
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="名榜,wangid">
<title>员工主页</title>


<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="js/Tdrag.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/style.css">



<script src="layui/layui.js" charset="utf-8"></script>
<style type="text/css">           
input{
			font-family: "楷体";
		}
		input:focus {
	        border-style: solid;
	        border-color: #03a9f4;
	        box-shadow: 0 0 15px #03a9f4;
           }
        textarea{
           	font-family: "楷体";
           }
		textarea:focus{
		    /*border: 1px;*/
		    border-style: solid;
	        border-color: #03a9f4;
	        box-shadow: 0 0 15px #03a9f4;
		} 
		.layui-laydate-content {
				width: 200px;
			}
			
			.layui-laydate-header {
				width: 230px;
	           
			}
			
			.layui-laydate-footer {
				width: 200px;
				
			}
			.menu div{
				background-color: transparent;
/* 				background: url(images/1216.gif) no-repeat center center;background-size: cover;
 */			    background-size: cover;
				width: 212px;
			}
			.layui-laydate-content {
				width: 212px;
				background-color: transparent;
				
			}
			
			.layui-laydate-header {
				width: 230px;
			}
			
			.layui-laydate-footer {
				width: 212px;
				background-color: transparent;
			}
</style>



</head>

<body>
	<div class="bg_box"
		style="background: url(images/20180604.jpg) no-repeat center center; background-size: cover;"></div>
	<div class="container"> 
		<div class="top_box">
			<div class="logo">
				<img src="images/logo_touming.gif"> <span></span> <b><img
					src="images/word.png" /></b>
			</div>

			<div style="height: 8px;margin-top: 5px;">
					<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12" style="margin-left: 150px;"></iframe>
            </div>
			<div class="top_icon">
				 <a href="login.jsp"> <img
					src="images/top_exit.png"></a>
			</div>
		</div>
		
		<div class="content_box">
			<div class="left_box">
				<div class="head">
				<c:if test="${sessionScope.userMessage!=null }">
					<i folat="left"><img src="images/head.jpg" /></i>
					<!-- 注释去间隔
	    	     -->
					<dl>
						<dd>
							<b>姓名：</b>${sessionScope.userMessage.userName}
						</dd>
						<dd>
							<b>部门：</b>${sessionScope.userMessage.deptName}
						</dd>
						<dd>
							<b>职务：</b>${sessionScope.userMessage.posName}
						</dd>
						<dd>
							<b>工号：</b>${sessionScope.userMessage.userId}
						</dd>
					</dl>
					</c:if>
				</div>
				
				<div class="menu" id="style-3" style="font-family:'楷体';">
						<div class="site-demo-laydate">
							<div class="layui-inline" id="test-n1"></div>
						</div>
				</div>
					<script src="layui/layui.all.js"></script>


					<script>
						layui.use('laydate', function() {
							var laydate = layui.laydate;
							laydate.render({
								elem: '#test-n1',
								/* showBottom: false, */
								position: 'static',
								btns: ['clear','now']
							});
						});
					</script>
				
				
			</div>
			<div class="right_box">
				<div class="icon_box">
					<ul class="boxList">
						<li class="list"><i> <img src="images/icon_01.png">
								<b></b>
						</i> <!-- 跳转到通讯录 --> <a href="sta.do?op=adb" target="blank"> <span>通讯录</span>
						</a></li>
						<li class="list"><i> <img src="images/icon_02.png">
								<b></b>
						</i>
							<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
								<a target="blank" class="gonggao" data-method="offset" data-type="auto">
									<span>请假申请</span>
								</a>
							</div></li>
						<li class="list"><i> <img src="images/icon_03.png">
								<b></b>
						</i> <a href="YuanGong_messages.jsp" target="blank"> <span>个人信息</span>
						</a></li>
						<li class="list"><i> <img src="images/icon_04.png">
								<b></b>
						</i>
							<div class="site-demo-button" id="layerDemo"
								style="margin-bottom: 0;">
								<a target="blank" class="gonggao" data-method="notice"> <span>公告通知</span></a>
							</div></li>
						<li class="list"><i> <img src="images/icon_05.png">
								<b></b>
						</i> <a href="My_mim.jsp" target="blank"> <span>修改密码</span>
						</a></li>
						<li class="list">
							<i>
								<img src="images/icon_02.png">
								<b></b>
							</i>
							<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
								<a target="blank" class="gonggao" data-method="offset2" data-type="auto">

									<span>我的假条</span>
								</a>
							</div>
						</li>

					</ul>


					<script>
						jQuery(function() {
							//第九个例子的拖拽
							$(".list").Tdrag({
								scope : ".boxList",
								pos : true,
								dragChange : true,
								changeMode : "sort",
								moveClass : "abc"
							});
						})
					</script>
				</div>
				<!-- iconbox end -->
				<div class="info_box">
					<div class="box battle">
						<div class="tit">
							<a class="on">考勤图表</a>
							<!-- 注释去间隔
	    	   注释去间隔 -->
							<div class="scrollnews">
								<span>公司通知：</span>
								<ul>
								<c:if test="${requestScope.companyNot.get(0)!=null }">
									<li title="1">最新公告： ${requestScope.companyNot.get(0).notContent }<i> ${requestScope.companyNot.get(0).notTime }</i>
									</li></c:if>
									<c:if test="${requestScope.companyNot.get(1)!=null }">
									<li title="2">最新公告： ${requestScope.companyNot.get(1).notContent }<i> ${requestScope.companyNot.get(1).notTime }</i>
									</li></c:if><c:if test="${requestScope.companyNot.get(2)!=null }">
									<li title="3">最新公告： ${requestScope.companyNot.get(2).notContent }<i> ${requestScope.companyNot.get(2).notTime }</i>
									</li></c:if>
								</ul>
								<script type="text/javascript">
									$(document)
											.ready(
													function() {
														//滚动文字
														function runtxt() {
															$(".scrollnews ul")
																	.animate(
																			{
																				marginTop : "-54px"
																			},
																			300,
																			function() {
																				$(
																						".scrollnews ul li:last")
																						.after(
																								$(".scrollnews ul li:first"))
																				$(
																						".scrollnews ul")
																						.css(
																								"margin-top",
																								0)
																			})
														}
														$(".scrollnews ul li a")
																.mouseenter(
																		function() {
																			clearInterval(timer)
																		})
														$(".scrollnews ul li a")
																.mouseleave(
																		function() {
																			timer = setInterval(
																					runtxt,
																					4000)
																		})
														timer = setInterval(
																runtxt, 4000)
													})
								</script>
							</div>
						</div>
						<div class="conbox">
							<div class="con">
								 <div id="main" style="width: 100%;height:400px;"></div>
							</div>
							
						</div>
						<script type="text/javascript">
							$(function() {
								var n = 0;
								$(".right_box .info_box .battle .tit a")
										.mouseover(
												function() {
													n = $(this).index();
													$(this).addClass("on")
													$(this).siblings()
															.removeClass("on")
													$(
															".right_box .info_box .battle .con")
															.hide().eq(n)
															.fadeIn()
												})
							})
						</script>
					</div>
					<div class="box honor">
						<div class="tit">
							<a class="on">我的考勤记录</a><a>加班时长排行榜</a>
							<!-- 注释去间隔
	    				 -->
							<div></div>
						</div>
						<div class="conbox">
							<div class="con">
								
								<table class="layui-table" id="overtime"  lay-filter="mylist" lay-size="lg" style="background-color:transparent;">
									<thead>
										<tr style="background-color:transparent;">
											<!-- <th lay-data="{type:'checkbox',fixed:'left'}"></th> -->
											<th>打卡时间</th>
											<th>加班时长</th>
											<th>考勤状态</th>
										</tr>
									</thead>
									<tbody>
										<c:if test="${requestScope.pageDataAttence.data!=null}">
											<c:forEach var="attence" items="${requestScope.pageDataAttence.data}">
												<tr>
													<!-- <td></td> -->
													<td>${attence.attTime}</td>
													<td>${attence.overTime}</td>
													<c:choose>
													<c:when test="${attence.attFlag==0}"><td>正常</td></c:when>
													<c:when test="${attence.attFlag==1}"><td>迟到</td></c:when>
													<c:when test="${attence.attFlag==2}"><td>早退</td></c:when>
													<c:when test="${attence.attFlag==3}"><td>加班</td></c:when>
													</c:choose>
												</tr>
											</c:forEach>
										</c:if>
									</tbody>
								</table>
								<div id="page"></div>
								<style type="text/css">
									#overtime thead th{
										/*border-color:black;*/
										border:0px;
										color:white;
										text-align: center;
										font-family: "bodoni mt black";
									}
									#overtime tbody td{
										/*border-color:black;*/
										border:0px;
										color:white;
										text-align: center;
										font-family: "bodoni mt black";
									}
									#overtime tbody tr:hover{
										background-color:transparent;
									}
									.content_box .left_box .head dl{
										margin-left:2%;

									}
								</style>
							</div>

							<div class="con">
								<div>
								
									<ul>
									<c:if test="${requestScope.overTimeList.get(0)!=null}">
										<li><i><img src="images/head.jpg"></i>
											<dl>
												<dt>${requestScope.overTimeList.get(0).userName}</dt>
												<dd>所属分区：${requestScope.overTimeList.get(0).deptName}</dd>
											</dl> <b><img src="images/honor_1.png"></b></li>
											</c:if>
											<c:if test="${requestScope.overTimeList.get(1)!=null}">
										<li><i><img src="images/head.jpg"></i>
										<dl>
												<dt>${requestScope.overTimeList.get(1).userName}</dt>
												<dd>所属分区：${requestScope.overTimeList.get(1).deptName}</dd>
											</dl> <b><img src="images/honor_2.png"></b></li>
											</c:if>
											<c:if test="${requestScope.overTimeList.get(2)!=null}">
											<li><i><img src="images/head.jpg"></i>
											<dl>
												<dt>${requestScope.overTimeList.get(2).userName}</dt>
												<dd>所属分区：${requestScope.overTimeList.get(2).deptName}</dd>
											</dl><b><img src="images/honor_3.png"></b></li>
											</c:if>
										
									</ul>
									<dl>
										<dt>加班时长</dt>
										<c:if test="${requestScope.overTimeList.get(0)!=null}">
										<dd>${requestScope.overTimeList.get(0).overTime}</dd>
										</c:if>
										<c:if test="${requestScope.overTimeList.get(1)!=null}">
										<dd>${requestScope.overTimeList.get(1).overTime}</dd>
										</c:if><c:if test="${requestScope.overTimeList.get(2)!=null}">
										<dd>${requestScope.overTimeList.get(2).overTime}</dd>
										</c:if>
									</dl>
								</div>
								<c:if test="${requestScope.overTimeList.get(0)!=null}">
								<p>${requestScope.overTimeList.get(0).deptName}的同学们很给力，加油！</p>
								</c:if>
							</div>
						</div>
						<script type="text/javascript">
							$(function() {
								var n = 0;
								$(".right_box .info_box .honor .tit a")
										.mouseover(
												function() {
													n = $(this).index();
													$(this).addClass("on")
													$(this).siblings()
															.removeClass("on")
													$(
															".right_box .info_box .honor .con")
															.hide().eq(n)
															.fadeIn()
												})
							})
						</script>
						
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		layui.use('layer',function() { //独立版的layer无需执行这一句
							var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

							//触发事件
							var active = {setTop : function() {
								var that = this;
									//多窗口模式，层叠置顶
								layer.open({
									type : 2, //此处以iframe举例
									title : '当你选择该窗体时，即会在最顶端',
									area : [ '390px', '260px' ],
									shade : 0,
									maxmin : true,
									offset : [ //为了演示，随机坐标
									Math.random()* ($(window).height() - 300),Math.random()* ($(window).width() - 390) ],
												content : '//layer.layui.com/test/settop.html',
												btn : [ '继续弹出', '全部关闭' ] //只是为了演示
												,yes : function() {
													$(that).click();
												}
												,btn2 : function() {
													layer.closeAll();
												}
												,zIndex : layer.zIndex //重点1
												,success : function(layero) {
													layer.setTop(layero); //重点2
												}
											});
								}

								,notice : function() {
									var ctext= '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+
									'<c:if test = "${requestScope.deptNot!=null}">'+
										'<c:forEach var="notice" items="${requestScope.deptNot}">'+
											'<span>${notice.notContent}</span>&nbsp&nbsp'+
											'<span>${notice.notTime}</span><br><br>'+
										'</c:forEach>'
									'</c:if></div>';
									//示范一个公告层
									layer.open({
												type : 1,
												title : false //不显示标题栏
												,closeBtn : false
												,area : '300px;'
												,shade : 0.5
												,id : 'LAY_layuipro' //设定一个id，防止重复弹出
												,btn : [ '好的，知道咯']
												,btnAlign : 'c'
												,moveType : 1 //拖拽模式，0或者1
												,content :ctext

											});
								},
								/* offset: function(othis) {
									var type = othis.data('type'),
										text = othis.text();

									layer.open({
										type: 1,
										offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
											,
										id: 'layerDemo' + type //防止重复弹出
											,
										content: '<div style="height: 500px ;width: 350px;"><br> <input type="text" class="layui-input" id="test1" placeholder="请选择请假开始时间"><br><input type="text" class="layui-input" id="test2" placeholder="请选择请假结束时间">  <br>  <textarea  style="height: 350px ;width: 340px;" placeholder="请填写请假内容"></textarea>  </div>',
										btn: '提交申请',
										btnAlign: 'c' //按钮居中
											,
										shade: 0.5 //不显示遮罩
											,
										yes: function() {
											layer.closeAll();
										}
									});
									layui.use('laydate', function() {
										var laydate = layui.laydate;

										//执行一个laydate实例
										laydate.render({
											elem: '#test1'//指定元素
											
										});
										laydate.render({
											elem: '#test2' //指定元素
										    
										});
									});
								}, */
								offset : function(othis) {
									var type = othis.data('type'), text = othis.text();
									layer.open({
										type : 1
										,offset : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
										,id : 'layerDemo' + type //防止重复弹出
										,content :  $('#request')
										,area:['400px','450px']
										,btnAlign : 'c' //按钮居中
										,title:'请假申请',
										shade : 0 //不显示遮罩
										,yes : function() {
											layer.closeAll();
										}
									});
						},
								offset2 : function(othis) {
									var type = othis.data('type'), text = othis
									.text();

									layer.open({
										type : 1,
										offset2 : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
										,id : 'layerDemo' + type //防止重复弹出
										,content : $('#req')
										,title : '部门员工请假审批'
										,btnAlign : 'c' //按钮居中
										,shade : 0 //不显示遮罩
										,area : [ '1400px', '600px' ],
										yes : function() {
											layer.closeAll();
								}
							});
						}
							};

							$('#layerDemo .gonggao').on('click',function() {
										var othis = $(this), method = othis
												.data('method');
										active[method] ? active[method].call(
												this, othis) : '';
									});

						});
	</script>
	<div id='req' style="display: none;">
		<table class="layui-hide" id="test" lay-filter="test"></table>



		<script type="text/html" id="barDemo">
  <a class="layui-btn" layui-btn-danger layui-btn-xs" lay-event="del">撤销</a>
</script>



		

		<script>
			layui.use('table', function() {
				var table = layui.table;

				table.render({
					elem : '#test',
					url : 'stareq.do',
					toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
					,
					defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
						title : '提示',
						layEvent : 'LAYTABLE_TIPS',
						icon : 'layui-icon-tips'
					} ],
					title : '用户数据表',
					cols : [ [ {
						field : 'reqId',
						title : 'reqId',
						width : 75,
						fixed : 'left',

						sort : true
					}, {
						field : 'userName',
						title : '请假人',
						
						width : 130,
						edit : 'text'
					}, {
						field : 'reqContent',
						title : '请假事由',
						width : 650,
						edit : 'text',

						templet : function(res) {
							return '<em>' + res.reqContent + '</em>'
						}
					}, {
						field : 'reqFlag',
						title : '状态',
						width : 80,
						edit : 'text',
						sort : true
					}, {
						field : 'reqTime',
						title : '提交时间 ',
						width : 200
					}

					, {
						fixed : 'right',
						title : '操作',
						toolbar : '#barDemo',
						width : 260
					} ] ],
					page : true
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
					case 'getCheckData':
						var data = checkStatus.data;
						layer.alert(JSON.stringify(data));
						break;
					case 'getCheckLength':
						var data = checkStatus.data;
						layer.msg('选中了：' + data.length + ' 个');
						break;
					case 'isAll':
						layer.msg(checkStatus.isAll ? '全选' : '未全选');
						break;

					//自定义头工具栏右侧图标 - 提示
					case 'LAYTABLE_TIPS':
						layer.alert('这是工具栏右侧自定义的一个图标按钮');
						break;
					}
					;
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					
					if (obj.event === 'del') {
						layer.confirm('确定要撤销吗？', function(index) {

							$.post("RequestsServlet",
									"op=del&id=" + data.reqId, function(json) {

										layer.msg(data != "true" ? "成功"
												: "失败", {
											icon : 1
										});

										obj.del();//layui的删除行，
										layer.close(index);
									});

						});

					} 
				});
			});
		 </script>
	</div>
	<div id='request' style="display: none"> <br>   
    <form class="layui-form" method="post" onsubmit="return false">
     
     开始时间：<input type="datetime-local" name="starttime">	<br />
     结束时间：<input type="datetime-local" name="endtime">
      <textarea   placeholder="请充分填写请假事由" name="content"style="height:280px;"class="layui-textarea"></textarea>   
       
     <!--  <input type="button" class="layui-btn"  lay-filter="formDemo" > -->
     <button type="submit" class="layui-btn" id="btn-submit" lay-filter="formDemo" lay-submit>提交</button>

      </form>
       </div>
	
		<script >
		
		layui.use(['table','form'],
		            function() {
		                $ = layui.jquery;
		                var form = layui.form,
		                layer = layui.layer;
		                layui.form.on('submit(formDemo)', function(data){
						    var obj=data.field;
						    //此时，需要提交表单信息给控制器，不是普通提交，异步的ajax提交
						    $.ajax({
						    	url:"sta.do",
						    	type: "post",
						    	data:{
						    		op:"addreq",
		                    		reqContent:"请假开始时间："+obj.starttime+";请假结束时间："+obj.endtime+";请假事由:"+obj.content
		                    	},
						    	success:function(msg)
						    	{
						    		//提示
									layer.msg(msg == "true" ? "操作成功!"
											: "操作失败", {
										icon : 1,
										time:1000
									}, function() {

										//关闭层，刷新页面[细化]
										parent.layer.closeAll();
										
										//??
										//data.update();
										
										//如果普通js的方法呢?
										//window.location.reload();

									});
						    	}
						    	
						    	
						    }); 
						    
						    
						    return false; //表单就不提交了
						  });
		/* form.on('submit(formDemo)',
		                function(data) {
		                    var obj=data.field;
		                    $.ajax({
		                    	url:'sta.do?op=addreq',
		                    	type:'post',
		                    	data:{
		                    		reqContent:"请假开始时间："+obj.starttime+";请假结束时间："+obj.endtime+";请假事由:"+obj.content
		                    	},
		                    	success:function(data){
		                    		if(data=="true"){
		                    		layer.alert("申请成功，等待审核", { icon: 6},
		                    		function() {
		                                  // 获得frame索引
		                                  var index = parent.layer.getFrameIndex(window.name);
		                                  //关闭当前frame
		                                  parent.layer.close(index);
		                                  parent.location.reload();
		                              });
		                    		}else{
		                    			layer.alert("申请失败", {icon: 6});
		                    		}
		                    	}
		                    });
		                 
		                    return false;
		                }); */

		            });


		</script>
 <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="backstageCSSandJS/js/echarts-for-x-admin.js"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),'echarts-for-x-admin');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '周周考勤表'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['迟到人数','早退人数','加班人数','加班时长','正常上班人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            }, 
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'迟到人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list1.get(0)}, ${requestScope.list1.get(1)}, ${requestScope.list1.get(2)}, ${requestScope.list1.get(3)}, ${requestScope.list1.get(4)}]
                },
                {
                    name:'早退人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list2.get(0)}, ${requestScope.list2.get(1)}, ${requestScope.list2.get(2)}, ${requestScope.list2.get(3)}, ${requestScope.list2.get(4)}]
                },
                {
                    name:'加班人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list3.get(0)}, ${requestScope.list3.get(1)}, ${requestScope.list3.get(2)}, ${requestScope.list3.get(3)}, ${requestScope.list3.get(4)}]
                },
                {
                    name:'加班时长',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list4.get(0)}, ${requestScope.list4.get(1)}, ${requestScope.list4.get(2)}, ${requestScope.list4.get(3)}, ${requestScope.list4.get(4)}]
                },
                {
                    name:'正常上班人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list5.get(0)}, ${requestScope.list5.get(1)}, ${requestScope.list5.get(2)}, ${requestScope.list5.get(3)}, ${requestScope.list5.get(4)}]
                } 
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
        </script>


</body>
<!-- <div> <br>   <form class="layui-form layui-form-pane" action="sta.do?op=req" method="post" onsubmit="return al()"><input type="text"  name="startTime" required lay-verify="required" value="" autocomplete="off" class="layui-input" placeholder="请填写开始时间">  <br>  <input type="text"  name="endTime" required lay-verify="required" value="" autocomplete="off" class="layui-input" placeholder="请填写结束时间"> <br>  <input type="text"  name="reasons" required lay-verify="required" value="" autocomplete="off" class="layui-input" placeholder="请填写请假原因">  <br> </form>     </div> -->
</html>

